<template>
  <div class="warrper">
    <img src="http://assets.rurushishi.com/activies/bgyAct/indexbg.jpg" class="indexBg" alt>
    <div class="count">
      参与人数：{{ totalcount }}
       中奖人数：{{totalBrowserCount}} 
      </div>
    <div class="music" @click="isPlay" :class="{'bor':!isplay}">
      <img src="http://assets.rurushishi.com/activies/mfAct/music.png" alt>
    </div>
    <div class="main">
      <div class="startbtn">
        <img src="http://assets.rurushishi.com/activies/bgyAct/icon_star1.png" alt @click="goMain">
      </div>
      <div class="main-text"></div>
      <div class="btn">
        <div class="rule">
          <img src="http://assets.rurushishi.com/activies/bgyAct/rule1.png" alt @click="goRule">
        </div>
        <div class="purchase">
          <img
            src="http://assets.rurushishi.com/activies/bgyAct/purchase1.png"
            alt
            @click="getCoupon"
          >
        </div>
      </div>
      <div class="empty"></div>
      <div class="proList">
        <ul>
          <li v-for="item in projectList" :key="item.id">
            <img v-lazy="item.proImg" alt>
            <h3 class="proName">{{item.name}}</h3>
            <p class="area">{{item.area}}</p>
            <p class="content">{{item.content}}</p>
            <a :href="'tel:'+item.phone">
              <img src="http://assets.rurushishi.com/activies/bgyAct/call.png" alt>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <Bottom :baseText="baseText"></Bottom>
    <share :isshare="isshare"></share>
  </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
//import { mapMutations } from "vuex";
//import wxsdk from "@/utils/wxsdk";
import { mapState, mapMutations } from "vuex";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import Share from "@/components/common/Share";
import Bottom from "@/components/common/Bottom";
import Qs from "qs";
export default {
  data() {
    return {
      isshare: false, //是否分享
      isplay: false, //是否播放音乐
      isJoin: false, //是否参加过活动
      reOpenid: '',
      openid: Cookies.get("openid"),
      baseText: config.BASE_TEXT,
      totalBrowserCount: 10, //中奖人数
      totalcount: 0, //参加人数
      registeroid: this.$route.query.registeroid ? this.$route.query.registeroid : '', //判断是否是销售中介
      latitude:'',
      longitude: '',
      projectListse: [
        {
          id: 1,
          name: "碧桂园·首座",
          area: "佛山市高明区",
          phone: "0757-88686388",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project1.png",
          content: "88- 110㎡户型 智装装修洋房，首付14万起，月供3xxx元"
        },
        {
          id: 2,
          name: "碧桂园·天汇湾",
          area: "佛山市高明区",
          phone: "0757-89998888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project2.png",
          content: "三期新品96-143㎡装修洋房，现正诚意登记中"
        },
        {
          id: 3,
          name: "顺德未来城",
          area: "佛山市顺德北滘新城区",
          phone: "0757-22367888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project3.png",
          content:
            "双强联袂，北滘新城TOD地标；华附旁，广州地铁上盖，97-116㎡智装洋房"
        },
        {
          id: 4,
          name: "碧桂园·世纪滨江",
          area: "佛山市禅城区",
          phone: "0757—6688068",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project4.png",
          content:
            "服务型江景小户、绿色企业独栋总部基地、高层研发中心、滨江人才社区、创意商业街区的综合体。建面约44㎡临江双钥匙、72㎡中空3房"
        },
        {
          id: 5,
          name: "碧桂园岭南盛世",
          area: "佛山市禅城区",
          phone: "0757-82902888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project5.png",
          content:
            "祖庙旁，岭南脊梁正宅。【崇德十三馆】、【全新崇德苑高层洋房组团】，盛世启临"
        },
        {
          id: 6,
          name: "碧桂园·君临壹品",
          area: "佛山市南海区",
          phone: "0757-86589888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project6.png",
          content: "百年文脉 城芯公园大城建面约100-137㎡轻奢三/四房 火热销售中"
        },
        {
          id: 7,
          name: "碧桂园奥斯汀",
          area: "佛山市三水区",
          phone: "0757-87800888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project7.png",
          content: "总价32万元/套 买碧桂园创意新品"
        },
        {
          id: 8,
          name: "碧桂园翡翠山",
          area: "佛山市三水区",
          phone: "0757-87832888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project8.png",
          content: "国家森林公园大城 智装洋房9字头为主"
        },
        {
          id: 9,
          name: " 碧桂园·佛山双子星城",
          area: "佛山市三水区",
          phone: "0757-87736888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project9.png",
          content: "3站城轨到广州，CBD地标智宅"
        },
        {
          id: 10,
          name: "碧桂园金辉坚果社区",
          area: "佛山市南海区",
          phone: "0757-81991555",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project10.png",
          content: "南海城区  全新智慧现房建面约85-116㎡实景装修洋房即将面世"
        },
        {
          id: 11,
          name: "碧桂园金沙国际广场",
          area: "佛山市南海区",
          phone: "0757-89373340",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project11.png",
          content:
            "跟着巨头财靠“铺”金沙洲 双地铁（在建）广百上盖 全业态缤纷Mall 火热招商中"
        },
        {
          id: 12,
          name: "大沥碧桂园华府",
          area: "佛山市南海区",
          phone: "0757-85583333",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project12.png",
          content:
            "广佛路、大沥镇政府旁，六横六纵交通，享20万人群消费力。主力建面约40-250㎡临街现铺火热租售中"
        },
        {
          id: 13,
          name: "西樵碧桂园翡翠湾",
          area: "佛山市南海区",
          phone: "0757-86869999",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project13.png",
          content: "8字头，住南海一线江景洋房"
        },
        {
          id: 14,
          name: "碧桂园广佛上城",
          area: "佛山市南海区",
          phone: "0757-8677 8888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project14.png",
          content: "28-49㎡创意空间约4.5米层高 菁英创梦主场"
        },
        {
          id: 15,
          name: " 碧桂园云空间",
          area: "佛山市顺德区",
          phone: "0757-29899888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project15.png",
          content:
            "总价36万起住碧桂园空中复式，建面约34-77平方米带智装公寓，4.5/5.5m层高"
        },
        {
          id: 16,
          name: "碧桂园美的水木清华",
          area: "佛山市顺德区",
          phone: "0757-29380888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project16.png",
          content:
            "首付2成起，住百亿军民融合区 学府旁，建面约90-116平方米智能双卫洋房；建面约30-225平方米临街商铺"
        },
        {
          id: 17,
          name: "碧桂园·智慧家",
          area: "佛山市顺德区",
          phone: "0757-22626666",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project17.png",
          content:
            "大良城芯 一揽繁华3地铁 10学校 4大商圈环绕 建面约93-117㎡阔景洋房"
        },
        {
          id: 18,
          name: "容桂碧桂园凤凰湾",
          area: "佛山市顺德区",
          phone: "0757-28800888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project18.png",
          content: "在售建面约89-270㎡江畔学府洋房，建面约37㎡亲江公寓式酒店"
        }
      ],

      projectList: [
          {
          id: 1,
          name: "碧桂园凤凰湾",
          area: "广州南·番禺对岸·顺德东",
          phone: "0757-28800888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project18.jpg",
          content: "粤港澳大湾区 千亩大都会建面约89-270㎡江墅洋房"
        },
         {
          id: 2,
          name: "碧桂园·君临壹品",
          area: "佛山·南海·九江",
          phone: "0757-86589888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project6.png",
          content: "百年文脉 城芯公园大城建面约101-129㎡轻奢花园洋房"
        },
        {
          id: 3,
          name: "碧桂园·世纪滨江",
          area: "粤港澳大湾区·佛山·禅城主城",
          phone: "0757—6688068",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project4.png",
          content:"季华路旁 双地铁TOD综合体建面约44-72㎡南向望江复式"
        },
        {
          id: 4,
          name: "碧桂园广佛上城",
          area: "佛山·南海·三山新城",
          phone: "0757-86778888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project14.png",
          content: "近广钢 三山新城TOD综合体地铁口（规划）建面约28-49㎡创意空间"
        },
        {
          id: 5,
          name: "碧桂园翡翠湾",
          area: "佛山·南海·西岸",
          phone: "0757-86869999",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project13.png",
          content: "广佛西空港圈 生态滨江大城建面约103-133㎡ 8字头、南海一线江景房"
        },
        {
          id: 6,
          name: "碧桂园·翡翠山",
          area: "佛山三水新城",
          phone: "0757-87832888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project8.png",
          content: "国家森林公园 智装洋房9字头为主建面约105-139㎡大城湖山美宅"
        },
        {
          id: 7,
          name: "碧桂园奥斯汀",
          area: "佛山三水新城",
          phone: "0757-87800888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project7.png",
          content: "主城上 汇繁华 乐生活建面约35-44装修公寓/建面约30-108㎡约6米层高临街商铺"
        },
        {
          id: 8,
          name: " 碧桂园·云空间",
          area: "顺德·勒流",
          phone: "0757-29899888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project15.png",
          content:
            "总价36万起 做20万产业菁英房东建面约34-77㎡创享公寓：勒流城芯 户户配独立阳台"
        },
         {
          id: 9,
          name: "碧桂园美的·水木清华",
          area: "顺德·杏坛",
          phone: "0757-29380888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project16.png",
          content:
            "百亿军民融合区 学府旁建面约90-116㎡智能双卫洋房"
        },
        {
          id: 10,
          name: "碧桂园·智慧家",
          area: "顺德·大良",
          phone: "0757-22626666",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project17.png",
          content:
            "大良城芯 一揽繁华建面约94-117㎡ 3地铁洋房"
        },
        {
          id: 11,
          name: "碧桂园岭南盛世",
          area: "佛山·禅城·祖庙",
          phone: "0757-82902888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project5.png",
          content:
            "祖庙旁 岭南脊梁正宅珍贵13席历史古建筑商业—崇德里、建面约90-140 ㎡二期全新高层城芯洋房"
        },
        {
          id: 12,
          name: "碧桂园·佛山双子星城",
          area: "佛山三水新城",
          phone: "0757-87736888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project9.png",
          content: "3站到广州 CBD地标智宅三期建面约92-107㎡智装花园洋房"
        },
         {
          id: 13,
          name: "碧桂园华府天地",
          area: "南海·大沥",
          phone: "0757-85583333",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project12.png",
          content:
            "20万客流 大沥行政金融商贸区建面约40-300㎡一线临街熟铺"
        },
        {
          id: 14,
          name: "碧桂园金辉坚果社区",
          area: "南海·大沥",
          phone: "0757-81991555",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project10.png",
          content: "南海城区 全新智慧现房建面约85-116㎡实景装修洋房 即将面世"
        },
        {
          id: 15,
          name: "顺德未来城",
          area: "广州南·北滘新城",
          phone: "0757-22367888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project3.png",
          content:
            "广佛门户 TOD天际综合体建面约97-116㎡精智地铁洋房"
        },
        {
          id: 16,
          name: "碧桂园首座",
          area: "佛山·高明·西江新城旁",
          phone: "0757-88686388",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project1.png",
          content: "西江新城旁智慧社区建面约88-110㎡智能洋房"
        },
         {
          id: 17,
          name: "碧桂园联丰天汇湾",
          area: "佛山·高明·西江新城",
          phone: "0757-89998888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project2.png",
          content: "一览河畔 城熟书香浓建面约98-143㎡全景洋房"
        },
          {
          id: 18,
          name: "高明碧桂园峰会",
          area: "佛山·高明·3000亩湖山",
          phone: "0757-88216888",
          proImg: "http://assets.rurushishi.com/activies/bgyAct/project19.jpg",
          content: "半山智宅 一席悦天下建面约98-116㎡学府装修洋房"
        }
      ]
    };
  },
  components: {
    share: Share,
    Bottom
  },
  methods: {
    isPlay() {
      let _self = this;
      if (!_self.isplay) {
        window.ConfigAudio.pause();
        _self.isplay = true;
      } else {
        window.ConfigAudio.play();
        _self.isplay = false;
      }
    },

    //跳转个人主页
    goMain() {
      let _self = this;
      // _self.$router.push({path:"./main",query:{channel:_self.channel,reOpenid:_self.openid}});
      window.location.href = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+_self.registeroid;
      // let query = {
      //   activityId: config.ACT_CODE,
      //   channel: _self.channel,
      //   openId: Cookies.get("openid")
      // };
      // axios
      //   .post(
      //     `${_self.global.API_FORUM_URL}/api/activity/participate?${Qs.stringify(
      //       query
      //     )}`,
      //     {}
      //   )
      //   .then(response => {
      //     console.info(response)
      //     if(response.code==0){
      //        _self.$router.push({path:"./main",query:{channel:_self.channel,reOpenid:_self.reOpenid}});
      //     }
      //   });
    },

    //获取购房优惠
    getCoupon() {
      window.location.href = location.protocol + '//' + location.host + '/act/bgyact/voucher?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
    },

    //跳转规则页面
    goRule() {
       window.location.href = location.protocol + '//' + location.host + '/act/bgyact/rule?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
    },

    //获取助力次数
    getCounts(){
      let _self = this;
       let query = {
                activityId: config.ACT_CODE,
                openId: Cookies.get("openid")
            };
            axios
                .get(
                `${_self.global.API_FORUM_URL}/api/lightenstar/selectCountAndList?${Qs.stringify(
                    query
                )}`,
                {}
                )
                .then(response => {
                console.info(response)
                if(response.code==0){
                    // _self.totalBrowserCount = response.list;
                    _self.totalcount = response.total*2;
                }
            });
    },
    
    //获取当前的位置信息
     getArea(){
       let _self = this;
       wx.ready(function () {
            wx.getLocation({
                success: function (res) {
                    _self.latitude = res.latitude;
                    _self.longitude = res.longitude;
                },
                fail: function (res) {
                    alert('用户地理位置无法获取')
                },
                cancel: function (res) {
                    alert('用户地理位置无法获取')
                }
            });
        });
     },
     

    ...mapMutations({
      setInfo: "SET_INFO",
      setChannel: "SET_CHANNEL"
    })
  },
  computed: {
    ...mapState(["info", "channel"])
  },
  created() {
    this.isshare = this.$route.query.isShare
      ? this.$route.query.isShare
      : false;
    this.reOpenid = this.$route.query.reOpenid
      ? this.$route.query.reOpenid
      : '';
    this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
    let _self =this;
            //  if(!_self.info.nickname){
                request
                    .get(_self.global.API_URL, {
                        action: "getUserinfo",
                        requestParam: {
                          
                        }
                    })
                    .then(response => {
                        _self.setInfo(response.obj.user);
                        // console.log(response.obj.salerOrAgent);
                        if(response.obj.salerOrAgent){
                          _self.registeroid=response.obj.user.openid
                          //  _self.registeroid = Cookies.get("openid")
                        }
                        // console.log(_self.info);
                        if (_self.info && _self.info.nickname && _self.info.nickname != '') {
                            _self.global.SHARE_TITLE = _self.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
                        }
                        _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                    });
            //  }else{
            //     _self.global.SHARE_TITLE = _self.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
            //     _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid'+_self.registeroid;
            //  }
              
    //加参加接口 判断是否参加过活动   如果参加过 isJoin设为true
    //   this.setInfo(response.obj);
  },
  mounted() {
    if (!window.ConfigAudio) {
      window.ConfigAudio = new Audio();
      window.ConfigAudio.src =
        "http://assets.rurushishi.com/activies/mfAct/2.mp3";
      wx.ready(function() {
        window.ConfigAudio.play();
      });
    } else {
      window.ConfigAudio.src =
        "http://assets.rurushishi.com/activies/mfAct/2.mp3";
      wx.ready(function() {
        window.ConfigAudio.play();
      });
    }
    let _self = this;
    let query = {
        activityId: config.ACT_CODE,
        channel: _self.channel,
        openId: Cookies.get("openid"),
        fromOpenId: _self.reOpenid
      };
      axios
        .post(
          `${_self.global.API_FORUM_URL}/api/activity/participate?${Qs.stringify(
            query
          )}`,
          {}
        )
        .then(response => {
          // console.info(response)
          if(response.code==0){
             _self.totalBrowserCount = response.prizeCount*2;
             _self.totalcount = response.total*2
          }
        });



           _self.global.SHARE_CALLBACK_OK = function (type) {
            //  let _self = this;
             let query = {
                activityId: config.ACT_CODE,
                // channel: 1,
                openId: Cookies.get("openid")
              };
                axios
                    .post(
                    `${_self.global.API_FORUM_URL}/api/activity/share?${Qs.stringify(
                      query
                    )}`,
                    {
                      
                    })
                    .then(response => {
                        if(response.code==0){
                          _self.isshare = false;
                        }
                         
                    });

            };
            config.initShare();
    // axios
    //     .post(
    //       `${_self.global.API_FORUM_URL}/api/activity/participate?${Qs.stringify(
    //         query
    //       )}`,
    //       {
            
    //       }
    //     )
    //     .then(function(response) {
          
    //     })
    //     .catch(function(error) {
    //       MessageBox.alert(error, "提示");
    //     });
  }
};
</script>
<style lang="stylus" scoped>
.warrper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #06121b;
}

.indexBg {
  width: 100%;
  height: 21.1rem;
  position: relative;
}

.count {
  position: absolute;
  top: 1.5rem;
  width: 100%;
  color: #fff;
  text-align: center;
}

.bor {
  animation: Rotate 1s infinite linear;
}

.music {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1rem;
  height: 1rem;
}

.music > img {
  width: 100%;
  height: 100%;
}

.main {
  position: absolute;
  top: 6.8rem;
  width: 100%;
}

.main-text {
  width: 4.95rem;
  height: 0.28rem;
  margin: 0 auto;
  background: url('http://assets.rurushishi.com/activies/bgyAct/frame.png') no-repeat; // assets.rurushishi.com/activies/bgyAct/frame.png) no-repeat
  background-size: 4.95rem 0.28rem;
}

.startbtn {
  width: 1.65rem;
  height: 1.72rem;
  margin: 0 auto;
}

.startbtn>img {
  width: 100%;
  animation: scales 1s infinite;
}

.btn {
  padding: 0.5rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.rule {
  width: 1.34rem;
  height: 0.5rem;
  margin-right: 0.8rem;
}

.rule>img {
  width: 100%;
  animation: swing 2s infinite;
}

.purchase {
  width: 1.36rem;
  height: 0.5rem;
}

.purchase>img {
  width: 100%;
  animation: swing 2s infinite;
}

.empty {
  width: 100%;
  height: 2rem;
}

.proList {
  width: 100%;
}

.proList>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #06121b;
  padding-bottom: 1rem;
}

.proList>ul>li {
  padding: 0.3rem 0.2rem;
  box-sizing: border-box;
  width: 46%;
  text-align: center;
  margin: 2%;
  border: 1px solid #e7c279;
}

.proList>ul>li>img {
  width: 3rem;
  // height: 1.5rem;
  margin: 0 auto;
}

.proList>ul>li>h3 {
  color: #e7c279;
  height: 0.5rem;
  line-height: 0.5rem;
}

.proList>ul>li .area {
  color: #fff;
  height: 0.6rem;
  line-height: 0.3rem;
}

.proList>ul>li .content {
  color: #fff;
  height: 2rem;
  line-height: 0.4rem;
  text-align: left;
  white-space: wrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.proList>ul>li>a {
  display: block;
  width: 100%;
  height: 0.5rem;
}

.proList>ul>li>a>img {
  width: 1.22rem;
  height: 0.36rem;
}

@keyframes scales {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  20% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  80% {
    transform: scale(1.1);
    opacity: 0.85;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes swing {
  0% {
    transform: rotate(0);
  }

  5% {
    transform: rotate(10deg);
  }

  10% {
    transform: rotate(-9deg);
  }

  15% {
    transform: rotate(8deg);
  }

  20% {
    transform: rotate(-7deg);
  }

  25% {
    transform: rotate(6deg);
  }

  30% {
    transform: rotate(-5deg);
  }

  35% {
    transform: rotate(4deg);
  }

  40% {
    transform: rotate(-3deg);
  }

  45% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes Rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>


